document.addEventListener('DOMContentLoaded', () => {
    // 获取所有连接线元素
    const line1 = document.getElementById('line1');
    const line2 = document.getElementById('line2');
    const line3 = document.getElementById('line3');
    const line4 = document.getElementById('line4');
    const line5 = document.getElementById('line5');

    // 获取左侧边栏和右侧边栏中的加号按钮
    const buttonsLeft = document.querySelectorAll('.sidebar .InputBtn');
    const buttonsRight = document.querySelectorAll('.sidebar-right-buttons .OutputBtn');


    // 函数：定位连接线位置，连接左侧按钮和右侧按钮
    function positionLine(line, btnLeft, btnRight) {
        const rectLeft = btnLeft.getBoundingClientRect();
        const rectRight = btnRight.getBoundingClientRect();

        const centerLeftX = rectLeft.left + rectLeft.width / 2;
        const centerLeftY = rectLeft.top - rectLeft.height / 2;
        const centerRightX = rectRight.left + rectRight.width / 2;
        const centerRightY = rectRight.top - rectRight.height / 2;

        line.style.top = `${centerLeftY}px`;
        line.style.left = `${centerLeftX}px`;
        line.style.width = `${centerRightX - centerLeftX}px`;
        line.style.height = '2px';
    }

    // 初始定位所有连接线
    positionLine(line1, buttonsLeft[0], buttonsRight[0]);
    positionLine(line2, buttonsLeft[1], buttonsRight[1]);
    positionLine(line3, buttonsLeft[2], buttonsRight[2]);
    positionLine(line4, buttonsLeft[3], buttonsRight[3]);
    positionLine(line5, buttonsLeft[4], buttonsRight[4]);

    // 监听窗口大小变化，重新定位连接线
    window.addEventListener('resize', () => {
        positionLine(line1, buttonsLeft[0], buttonsRight[0]);
        positionLine(line2, buttonsLeft[1], buttonsRight[1]);
        positionLine(line3, buttonsLeft[2], buttonsRight[2]);
        positionLine(line4, buttonsLeft[3], buttonsRight[3]);
        positionLine(line5, buttonsLeft[4], buttonsRight[4]);
    });


});
